<template>
    <div v-show="modal" class="fullscreenModalBox">
        <div class="van-header">
            <div class="left">
                <div v-if="backBtnType === 'arrowhead'">
                    <!-- 新增返回列表页 -->
                    <van-icon name="arrow-left" size="16" v-if="isAdd" @click="$emit('handleClose')" />
                    <!-- 详情返回列表页 -->
                    <van-icon name="arrow-left" size="16" v-if="editType == 'detail'" @click="$emit('handleClose')" />
                    <!-- 编辑返回详情 -->
                    <van-icon name="arrow-left" size="16" v-if="editType == 'edit' && !isAdd" @click="$emit('handleCancel')" />
                    <!-- 上传下载返回列表页 -->
                    <van-icon name="arrow-left" size="16" v-if="editType == 'other'" @click="$emit('handleClose')" />
                </div>
            </div>
            <div class="middle">
                <span class="label" v-if="isAdd">新增{{ label }}</span>
                <span class="label" v-if="editType == 'detail'">{{ label }}详情</span>
                <span class="label" v-if="editType == 'edit' && !isAdd">编辑{{ label }}</span>
                <span class="label" v-if="editType == 'other' || editType == 'rightClose'">{{ label }}</span>
            </div>
            <div class="btn-group">
                <slot name="btnList"></slot>
                <a v-if="editType == 'detail' && isShowEdit" @click="handleMethods('handleEdit')">编辑</a>
                <a v-if="editType == 'detail' && isShowEdit && showSubmit" @click="handleMethods('handleOnlySubmit')" class="ml-10">提交</a>
                <a v-if="editType == 'detail' && showDetailSubmit" @click="handleMethods('handleSubmit')" class="ml-10">提交</a>
                <a v-if="editType == 'edit' && showSave" @click="$emit('handleSave')">保存</a>
                <a v-if="editType == 'other' && showSave" @click="$emit('handleSave')">保存</a>
                <a v-if="editType == 'edit' && showSubmit" @click="$emit('handleSubmit')" class="ml-10">提交</a>
                <!-- 标题右侧关闭按钮 -->
                <van-icon v-if="editType == 'rightClose'" class="closeIcon" name="cross" size="16" @click="$emit('handleClose')" />
            </div>
        </div>
        <div class="content" :style="{'background-color': defaultBgColor}">
            <slot></slot>
        </div>
        <moveBtn @on-click="onClickLeft" v-if="backBtnType === 'circular'" />
    </div>
</template>

<script>
    export default {
        props: {
            // 是否展示该弹框
            modal: {
                type: Boolean,
                default: false,
            },
            // 详情/编辑类型
            editType: {
                type: String,
                default: "",
            },
            // 标题
            label: {
                type: String,
                default: "信息",
            },
            // 是否是新增
            isAdd: {
                type: Boolean,
                default: false,
            },
            // 是否显示编辑按钮
            isShowEdit: {
                type: Boolean,
                default: true,
            },
            // 是否显示保存按钮
            showSave: {
                type: Boolean,
                default: true,
            },
            // 是否显示提交按钮
            showSubmit: {
                type: Boolean,
                default: false,
            },
            // 详情页面显示提交按钮
            showDetailSubmit: {
                type: Boolean,
                default: false,
            },
            // 自定义背景色
            defaultBgColor: {
                type: String,
                default: 'none',
            },
            backBtnType: { // 返回按钮样式：circular圆型按钮、arrowhead箭头
                type: String,
                default: 'circular'
            }
        },
        methods: {
            handleMethods (name) {
                this.$emit(name);
            },
            // 圆形返回按钮
            onClickLeft () {
                if (this.isAdd || this.editType == 'detail' || this.editType == 'other') {
                    this.$emit('handleClose');
                }
                if (this.editType == 'edit' && !this.isAdd) {
                    this.$emit('handleCancel');
                }
            }
        },
    };
</script>

<style lang="less" scoped>
    .fullscreenModalBox {
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        z-index: 999;
        background: white;
        .van-header {
            height: 46px;
            padding: 0 15px;
            box-sizing: border-box;
            border-bottom: 1px solid #eee;
            display: flex;
            align-items: center;
            justify-content: space-between;
            background: #f9f9f9;
            line-height: 1;
            .left {
                text-align: left;
                width: 90px;
            }
            .middle {
                font-size: 15px;
                flex: 1;
                text-align: center;
            }
            .btn-group {
                width: 90px;
                text-align: right;
                color: #00a9ff;
                .ml-10 {
                    margin-left: 10px;
                }
                .closeIcon {
                    color: #aaa;
                }
            }
        }
        .content {
            height: calc(100% - 46px);
            overflow: auto;
        }
    }
</style>
